@import '@scalar/themes/style.css';
@import 'tailwindcss/base' layer(scalar-base);

:where(.scalar-app) {
  @tailwind components;
  @tailwind utilities;
  @tailwind variants;

  /**
   * Custom utilities to make life easier
   * For some reason it was bugging on apply so I just used css for now
   */
  @layer utilities {
    .row {
      /* @apply flex flex-row; */
      display: flex;
      flex-direction: row;
    }
    .scalar-row {
      /* @apply flex flex-row; */
      display: flex;
      flex-direction: row;
    }
    .row-1 {
      /* @apply flex flex-1 flex-row; */
      display: flex;
      flex-direction: row;
      flex: 1 1 0%;
    }
    .col {
      /* @apply flex flex-col; */
      display: flex;
      flex-direction: column;
    }
    .col-1 {
      /* @apply flex flex-1 flex-col; */
      display: flex;
      flex-direction: column;
      flex: 1 1 0%;
    }
    .flex-center {
      /* @apply flex items-center justify-center; */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .centered-x {
      /* @apply left-1/2 -translate-x-1/2; */
      left: 50%;
      --tw-translate-x: -50%;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .centered-y {
      /* @apply top-1/2 -translate-y-1/2; */
      top: 50%;
      --tw-translate-y: -50%;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    .centered {
      /* @apply centered-x centered-y; */
      left: 50%;
      --tw-translate-x: -50%;
      top: 50%;
      --tw-translate-y: -50%;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y))
        rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
        scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
  }
}
